<template>
	<div style="border: 1px solid #eee;margin: 20px 20px 0 20px;">
		<div style="margin-left: 20px;overflow: hidden;">
			<el-form class="form-container" style="padding: 20px 0;float: left;width: 80%;">
				<el-select  style="width: 120px;" v-model="value" placeholder="请选择状态">
				    <el-option
				      v-for="item in statusOptions"
				      :key="item.id"
				      :label="item.value"
				      :value="item.value">
				    </el-option>
				</el-select>
				<el-select  style="width: 150px;" v-model="value" placeholder="请选择搜索方式">
				    <el-option
				      v-for="item in typeOptions"
				      :key="item.id"
				      :label="item.value"
				      :value="item.value">
				    </el-option>
				</el-select>
				<el-input v-model="input" clearable style="width: 200px;"></el-input>
				<el-button type="primary" icon="el-icon-search">搜索</el-button>
	        </el-form>
		</div>
		<div>
			<el-table :data="tableData" row-key="id"   border fit highlight-current-row style="width: 100%;font-size: 12px;">
			 	<el-table-column width="50" align="center" label="头像">
			        <template slot-scope="scope">
			          <img :src="scope.row.img" width="35" height="35"/>
			        </template>
		      	</el-table-column>
		      	<el-table-column width="50" align="center" label="昵称">
			        <template slot-scope="scope">
			          <span>{{scope.row.name}}</span>
			        </template>
			    </el-table-column>
		      	<el-table-column width="80" align="center" label="手机">
			        <template slot-scope="scope">
			          <span>{{scope.row.phoneNum}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="50"  align="center" label="类型">
			        <template slot-scope="scope">
			          <span>{{scope.row.type}}</span>
			        </template>	
			    </el-table-column>
			    <el-table-column width="100"  align="center" label="资源名称">
			        <template slot-scope="scope">
			          <span>{{scope.row.rsourceName}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="200"  align="center" label="评论内容">
			        <template slot-scope="scope">
			          <span>{{scope.row.commentContent}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="80"  align="center" label="评论时间	">
		        <template slot-scope="scope">
		          <span>{{scope.row.commentTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
		        </template>
		    </el-table-column>
		    <el-table-column align="center" width="100" label="点赞">
		        <template slot-scope="scope">
		          <span>{{scope.row.praiseTimes}}</span>
		        </template>	
		    </el-table-column>
			    <el-table-column  align="center" width="200" label="回复">
			        <template slot-scope="scope">
			          <span>{{scope.row.replyContent}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column width="80"  align="center" label="回复时间">
			        <template slot-scope="scope">
			          <span>{{scope.row.replyTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
			        </template>
		    	</el-table-column>
		    	<el-table-column width="50"  align="center" label="状态">
			        <template slot-scope="scope">
			          <span>{{scope.row.status}}</span>
			        </template>	
			    </el-table-column>
			     <el-table-column  align="center" label="操作">
			        <template slot-scope="scope">
	                    <b @click="isShowReply=true">回复</b>
	                    <b @click="choice">精选</b>
	                    <b @click="hideComment">隐藏</b>
	                </template>
			    </el-table-column>
		   </el-table>
		</div>
		<replyContent v-show="isShowReply" @changeShowReply="hideReply"></replyContent>
	</div>
</template>
<script>
export default {
  components: {
    replyContent: require('./replyContent').default // 引入回复内容组件
  },
  data() {
    return {
      isShowReply: false, // 显示回复组件
      display_time: null,
      end_time: null,
      value: null,
      input: null,
      statusOptions: [
        {
          id: 0,
          value: '全部状态'
        }, {
          id: 1,
          value: '显示'
        }, {
          id: 2,
          value: '精选'
        }, {
          id: 3,
          value: '隐藏'
        }
      ],
      typeOptions: [
        {
          id: 0,
          value: '评论内容'
        }, {
          id: 1,
          value: '用户手机'
        }, {
          id: 2,
          value: '资源名称'
        }
      ],
      tableData: [
        {
          img: '../../../build/logo.png',
          name: 'wxx虾米',
          phoneNum: '13156781234',
          type: '视频',
          rsourceName: '哈哈哈test',
          commentContent: '这是评论',
          commentTime: '1521000154654',
          praiseTimes: '14',
          replyContent: '',
          replyTime: '',
          status: '显示'
        },
        {
          img: '../../../build/logo.png',
          name: 'wxx虾米',
          phoneNum: '13156781234',
          type: '视频',
          rsourceName: '哈哈哈test',
          commentContent: '这是评论，哈哈哈哈哈哈哈哈哈哈哈',
          commentTime: '1521000154654',
          praiseTimes: '14',
          replyContent: '',
          replyTime: '',
          status: '显示'
        },
        {
          img: '../../../build/logo.png',
          name: 'wxx虾米',
          phoneNum: '13156781234',
          type: '视频',
          rsourceName: '哈哈哈test',
          commentContent: '这是评论',
          commentTime: '1521000154654',
          praiseTimes: '14',
          replyContent: '',
          replyTime: '',
          status: '显示'
        },
        {
          img: '../../../build/logo.png',
          name: 'wxx虾米',
          phoneNum: '13156781234',
          type: '视频',
          rsourceName: '哈哈哈test',
          commentContent: '这是评论',
          commentTime: '1521000154654',
          praiseTimes: '14',
          replyContent: '',
          replyTime: '',
          status: '显示'
        }
      ]
    }
  },
  methods: {
    hideReply(msg) {
      this.isShowReply = msg
    },
    choice() { // 确认精选的方法
      this.$confirm('确定精选?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '精选成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消精选'
        })
      })
    },
    hideComment() { // 确认隐藏的方法
      this.$confirm('确定隐藏?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '隐藏成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消隐藏'
        })
      })
    }
  }
}
</script>

<style scoped>
	b{
		cursor: pointer;
		font-weight: 500;
	}
	b:hover{
		color: #409EFF;
	}
</style>